.clip01 {
  width: 10vw;
  aspect-ratio: 1 / 1;
  background-color: #f00;
  /* 
    clip-path是切片,circle是切片成圆形
  */
  clip-path: circle(50%);
}

.clip02 {
  width: 10vw;
  aspect-ratio: 1 / 1;
  background-color: #f00;
  /* 
    polygon是多边形，参数是点的坐标的列表
    每个点的坐标是x y，多个点中间用逗号分开
  */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* 练习题：画一个正五角星 */

.clip03 {
  width: 10vw;
  aspect-ratio: 1 / 1;
  background-color: #f00;

  clip-path: polygon(20% 40%, 80% 40%, 100% 100%, 0% 100%);
}

.g1 {
  width: 50vw;
  height: 5rem;
  /* 
  linear-gradient是线性渐变
  参数一是渐变的角度，后面全是颜色值
  transparent表示透明色
  rgba是带透明度的颜色
  */
  background: linear-gradient(
    30deg,
    #f00,
    rgba(72, 164, 174, 0.2),
    transparent
  );
}

.g2 {
  width: 50vw;
  aspect-ratio: 16 / 9;
  background: linear-gradient(30deg, transparent, #f00),
    url('../images/bataman-03.jpg');
  background-size: cover;
}

.g3 {
  width: 10vw;
  aspect-ratio: 1 / 1;
  background: linear-gradient(300deg, #f00, transparent),
    linear-gradient(196deg, #f0f, transparent),
    linear-gradient(77deg, #ff0, transparent);
}

.g4 {
  width: 10vw;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* 
  radial-gradient是径向渐变 
  */
  background: radial-gradient(#f00, #ff0);
}
